<template>
    <AppBreadCrumb :list="[{ name: '首页', path: '/my' }, { name: '我的班级', path: '/class' }]"></AppBreadCrumb>
    <div class="box p-9">
        <div class="flex justify-between mb-5">
            <div>
                <h3 class="font-bold text-xl mb-3">{{ formData.title }}</h3>
                <div class="flex items-center">
                    <img style="width: 24px; height: 24px;" src="../../assets/img/icon/icon-01.svg" alt="">
                    <span>12个课程</span>

                    <img style="width: 24px; height: 24px;" src="../../assets/img/icon/icon-02.svg" alt="">
                    <span>9名学生</span>
                </div>
            </div>
            <div class="ticket-btn-grp">
                <button v-show="curTab == 'student'" class="btn-create" @click="bus.emit('open-student')"> 添加学生
                </button>
                <button v-show="curTab == 'course'" class="btn-create" @click="bus.emit('open-course')"> 添加课程
                </button>
                <button v-show="curTab == 'exam'" class="btn-create" @click="bus.emit('open-exam')"> 安排考试
                </button>
            </div>
        </div>

        <AppTabs :tabs="tabs" v-model="curTab"></AppTabs>
    </div>
</template>
<script setup>
import bus from '@/utils/bus'
import classApi from '@/api/classApi'
import studentApi from '@/api/studentApi'

const tabs = ref([
    {
        id: "course",
        name: '课程',
        comp: defineAsyncComponent(() => import('./courseInfo.vue'))
    },
    {
        id: "student",
        name: '学生',
        comp: defineAsyncComponent(() => import('./studentInfo.vue'))

    },
    {
        id: "process",
        name: '进度',
        comp: defineAsyncComponent(() => import('./processInfo.vue'))

    },
    {
        id: "exam",
        name: '考试',
        comp: defineAsyncComponent(() => import('./examInfo.vue'))

    },
    {
        id: "setting",
        name: '设置',
        comp: defineAsyncComponent(() => import('./settingInfo.vue'))

    }
])
const curTab = ref('course')
const route = useRoute()
const router = useRouter()

const formData = reactive({
    title: '测试',

})



const search = async () => {
    const id = route.query.id
    if (!id) {
        alert('参数错误,请选择具体的班级')
        router.push('/teacher/class')
        return;
    }

    const data = await classApi.getDetail(id)
    formData.title = data.title
    // formData.level = data.level
    // formData.type = data.type
    // formData.subject = data.subject
    // formData.learnMethod = data.learnMethod
    // formData.tenantID = data.tenantID
    // formData.tearcherID = data.tearcherID
    // formData.state = data.state
}
onMounted(async () => {
    // await nextTick()
    search()

})

</script>

<style scoped>
.category-tab.tickets-tab-blk .nav-justified .nav-item {
    flex-basis: 80px;
}

.search-form {
    width: 400px;
}

.cur {

    background: #392C7D;
    color: #FFF;
}

table td {
    font-size: small;
}
</style>